<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-125454191-4"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'UA-125454191-4');
    </script>

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Basic -->
    <meta charset="UTF-8" />
    <meta name="theme-color" content="#09f" />
    <meta
      name="description"
      content="I hate writing assignments so I made this tool that converts text to an image that looks like handwriting. You can copy paste text content into the textbox and click generate image button to generate image. Text to Handwriting"
    />
    <meta
      name="keywords"
      content="text to handwriting, text-to-handwrting, saurabh text to handwriting, convert text to image, write assignment online"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="author" content="Saurabh Daware" />
    <meta name="copyright" content="Saurabh Daware" />
    <meta name="robots" content="follow" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Text to Handwriting" />
    <meta
      property="og:url"
      content="https://saurabhdaware.github.io/text-to-handwriting"
    />
    <meta
      property="og:description"
      content="I hate writing assignments so I made this tool that converts text to an image that looks like handwriting. You can copy paste text content into the textbox and click generate image button to generate image. Text to Handwriting"
    />
    <meta property="og:site_name" content="Text to Handwriting" />

    <meta
      property="og:image:secure_url"
      itemprop="image"
      content="https://res.cloudinary.com/saurabhdaware/image/upload/v1585413874/saurabh2019/projects/text-to-handwriting.png"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="https://res.cloudinary.com/saurabhdaware/image/upload/v1585413874/saurabh2019/projects/text-to-handwriting.png"
    />
    <meta property="og:image:width" content="600" />
    <meta property="og:image:height" content="337" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@saurabhcodes" />

    <title>Text to Handwriting</title>

    <!-- Favicons -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="images/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="images/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="images/favicon-16x16.png"
    />

    <!-- PWA Migration -->
    <link rel="manifest" href="./manifest.webmanifest" />

    <!-- Load Fonts -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Homemade+Apple|Roboto|Caveat|Liu+Jian+Mao+Cao&display=swap"
    />

    <!-- CSS -->
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/features.css" />
  </head>

  <body>
    <main>
      <button
        aria-label="Activate Dark Mode"
        title="Toggle Dark Mode"
        aria-pressed="false"
        onclick="toggleTheme(this)"
        class="dark-mode-toggle"
      >
        <span class="sun">
          <img
            alt="sun icon that represents light mode"
            width="35px"
            src="images/sun.svg"
        /></span>
        <span class="moon"
          ><img
            alt="moon icon to represent dark mode "
            width="25px"
            src="images/moon.svg"
        /></span>
      </button>
      <h1>手写体文档照片生成</h1>
      <section style="font-size: 1rem; padding: 20px 0px;">
        <div>
          Hello there~ <br /><br />
          也许你懒得抄写千篇一律的寒假作业，也许某个奇怪的老师要求必须手抄，亦或许某场考试只能携带手抄的资料，那么这个工具可以帮到你。
          <ul class="info-ul">
            <li>
              可直接在页面上的纸张里编辑内容
            </li>
            <li>
              如果你想添加自己的字体，可以去网上下载（比如
              <a href="https://www.fonts.net.cn/fonts-zh/tag-shouxie2-1.html"
                >字体天下</a
              >
              ），解压上传即可。
            </li>
            <li>
              本网页由项目
              <a href="https://github.com/saurabhdaware/text-to-handwriting"
                >saurabhdaware/text-to-handwriting</a
              >
              改编而来，主要是翻译 + 添加多个中文手写体。开源协议遵循原项目。
            </li>
          </ul>
          <br />
        </div>
      </section>
      <section class="generate-image-section">
        <form id="generate-image-form">
          <!-- Generate Image Section -->
          <div class="display-flex output-grid responsive-flex">
            <div class="flex-1 page-container-super">
              <div>
                <h2 style="margin-top: 0px;">编辑</h2>
                <label class="block" for="note">可直接将内容粘贴进来↓</label>
              </div>

              <div class="flex-1 page-container">
                <div class="page-a margined lines">
                  <div contenteditable="true" class="top-margin"></div>
                  <div class="display-flex left-margin-and-content">
                    <div contenteditable="true" class="left-margin"></div>
                    <div class="paper-content" id="note" contenteditable="true">
                      永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。
                      夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，曾不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。古人云：“死生亦大矣。”
                      岂不痛哉！
                      每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔。悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。
                    </div>
                  </div>
                  <div class="overlay"></div>
                </div>
                <br />
              </div>

              <div>
                <button
                  id="draw-diagram-button"
                  type="button"
                  style="font-size: 0.9rem; margin-top: 5px;"
                  class="draw-button"
                >
                  涂鸦 <small>（测试版）</small>
                </button>
              </div>
            </div>

            <div class="customization-col">
              <!-- Handwriting Font -->
              <div style="padding: 5px 0px 5px 0px;">
                <b>自定义</b>
                <p style="font-size: 0.8rem;">
                  注：有些小变动仅在输出文档中才能看出
                </p>
              </div>
              <fieldset>
                <legend>手写字体设置</legend>

                <div class="category-grid">
                  <div>
                    <label class="block" for="handwriting-font">选择字体</label>
                    <select id="handwriting-font">
                      <option
                        selected
                        style="font-family: 'Homemade Apple';"
                        value="'Homemade Apple', cursive"
                      >
                        Homemade Apple
                      </option>
                      <option value="Hindi_Font">Kruti-dev(Hindi)</option>
                      <option
                        style="font-family: 'Caveat', cursive; font-size: 13pt;"
                        value="'Caveat', cursive"
                      >
                        Caveat
                      </option>
                      <option
                        style="
                          font-family: 'Liu Jian Mao Cao';
                          font-size: 13pt;
                        "
                        value="'Liu Jian Mao Cao', cursive"
                      >
                        Liu Jian Mao Cao
                      </option>
                    </select>
                  </div>
                  <div class="upload-handwriting-container">
                    <label class="block" for="font-file"
                      >上传字体 <small>（测试）</small>&nbsp;
                      <a
                        style="font-size: 1.1rem;"
                        title="How to add your own handwriting"
                        href="#how-to-add-handwriting"
                      >
                        &#9432;
                      </a>
                    </label>
                    <input accept=".ttf, .otf" type="file" id="font-file" />
                  </div>
                </div>
              </fieldset>

              <!-- Pen ink color, Font size, Vertical position text, Word Spacing -->
              <fieldset>
                <legend>页面 / 文本设置</legend>

                <div class="category-grid">
                  <div class="postfix-input" data-postfix="pt">
                    <label for="font-size">字体大小</label>
                    <input
                      id="font-size"
                      min="0"
                      step="0.5"
                      value="10"
                      type="number"
                    />
                  </div>
                  <div>
                    <label class="block" for="ink-color">字体颜色</label>
                    <select id="ink-color">
                      <option default value="#000f55">蓝</option>
                      <option value="black">黑</option>
                      <option value="#ba3807">红</option>
                    </select>
                  </div>
                  <div>
                    <label class="block" for="page-size">纸张尺寸</label>
                    <select id="page-size">
                      <option default value="a4">A4 &nbsp;</option>
                    </select>
                  </div>
                  <div>
                    <label class="block" for="page-effects">特效</label>
                    <select id="page-effects">
                      <option default value="shadows">阴影</option>
                      <option value="scanner">扫描仪</option>
                      <option value="no-effect">无</option>
                    </select>
                  </div>
                  <div>
                    <label class="block" for="resolution">分辨率</label>
                    <select id="resolution">
                      <option value="0.8">非常低</option>
                      <option value="1">低</option>
                      <option selected value="2">正常</option>
                      <option value="3">高</option>
                      <option value="4">非常高</option>
                    </select>
                  </div>
                </div>
              </fieldset>

              <fieldset>
                <legend>间距设置</legend>

                <div class="category-grid">
                  <div class="postfix-input" data-postfix="px">
                    <label for="top-padding">行间距</label>
                    <input id="top-padding" min="0" value="5" type="number" />
                  </div>
                  <div class="postfix-input" data-postfix="px">
                    <label for="word-spacing">段落间隔</label>
                    <input id="word-spacing" min="0" value="0" type="number" />
                  </div>
                  <div class="postfix-input" data-postfix="pt">
                    <label for="letter-spacing">字间距<!--  --></label>
                    <input id="letter-spacing" value="0" type="number" />
                  </div>
                </div>
              </fieldset>

              <!-- Letter spacing, Paper Margin, Paper Lines, Paper Curvature -->
              <fieldset>
                <legend>对齐 / 行设置</legend>

                <div class="category-grid">
                  <div>
                    <label for="paper-margin-toggle"
                      >侧边线：
                      <span aria-label="paper margin status" class="status"
                        >开</span
                      >
                    </label>
                    <label class="switch-toggle outer">
                      <input
                        aria-checked="true"
                        checked
                        aria-label="Paper Margin Button"
                        id="paper-margin-toggle"
                        type="checkbox"
                      />
                      <div></div>
                    </label>
                  </div>

                  <div>
                    <label for="paper-line-toggle"
                      >行线：
                      <span aria-label="paper line status" class="status"
                        >开</span
                      >
                    </label>
                    <label class="switch-toggle outer">
                      <input
                        aria-checked="true"
                        checked
                        aria-label="Paper Line Button"
                        id="paper-line-toggle"
                        type="checkbox"
                      />
                      <div></div>
                    </label>
                  </div>
                  <div class="experimental">
                    <!-- Removed option -->
                    <div class="upload-paper-container">
                      <label class="block" for="paper-file"
                        >上传纸张图片作为背景</label
                      >
                      <input
                        accept=".jpg, .jpeg, .png"
                        type="file"
                        id="paper-file"
                      />
                    </div>
                  </div>
                </div>
              </fieldset>

              <!-- GENERATE IMAGE BUTTONS -->
              <hr
                style="
                  border: 0.3px solid var(--elevation-background);
                  width: 80%;
                "
              />
              <div style="text-align: center; padding: 30px 0px;">
                <button
                  type="submit"
                  data-testid="generate-image-button"
                  class="button generate-image-button"
                >
                  生成图片
                </button>
              </div>
            </div>
          </div>
        </form>
      </section>

      <!-- OUTPUT -->
      <section>
        <h2 id="output-header">输出</h2>
        <div id="output" class="output" style="text-align: center;">
          单击 '生成图片' 来生成。
        </div>
        <div style="text-align: center; padding: 30px;">
          <button class="imp-button" id="download-as-pdf-button">
            Download All Images as PDF
          </button>
          <button class="delete-button" id="delete-all-button">
            Clear all images
          </button>
        </div>
      </section>

      <section id="how-to-add-handwriting">
        <h2>🤓 Guide to add your own handwriting</h2>
        <div>
          <ul>
            <li>
              To use your handwriting, you will have to generate font of your
              handwriting.
            </li>
            <li>
              There are websites like
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.calligraphr.com/en/"
                >Calligraphr</a
              >
              that let you do that.
            </li>
            <li>
              Once you get .ttf file of your handwriting, upload it from 'Upload
              your handwriting font' button in customizations sections
            </li>
          </ul>
        </div>
      </section>

      <section id="sponsors">
        <h2>🤗 Sponsors</h2>
        <p>
          This tool is completely free and neither stores any of your data for
          money so maybe you can consider being patron or making an one time
          payment with buy me a coffee to help sustain 🤗
        </p>
        <p>
          <a href="https://www.patreon.com/bePatron?u=31891872">
            <img
              loading="lazy"
              style="border-radius: 4px;"
              alt="Buy me a Coffee Button"
              width="200"
              src="https://c5.patreon.com/external/logo/become_a_patron_button.png"
            />
          </a>
          &nbsp;
          <a href="https://www.buymeacoffee.com/saurabhdaware">
            <img
              loading="lazy"
              style="border-radius: 4px;"
              alt="Buy me a Coffee Button"
              width="200"
              src="https://cdn.buymeacoffee.com/buttons/default-yellow.png"
            />
          </a>
        </p>
      </section>

      <section id="github-contributors">
        <h2>👫 GitHub Contributors</h2>
        <div class="project-contributors" id="project-contributors"></div>
        <div style="padding: 20px 5px;">
          Text-to-Handwriting is an open-source tool built with HTML, CSS, and
          JavaScript! <br />You can check out
          <a
            href="https://github.com/saurabhdaware/text-to-handwriting/blob/master/CONTRIBUTING.md"
            >CONTRIBUTING.md on GitHub</a
          >, if you want to contribute.
        </div>
      </section>

      <section id="faq">
        <h2>❓ FAQs (Frequently Asked Questions)</h2>
        <div>
          <h3>1. How can I add my own Handwriting?</h3>
          <p>
            Check out
            <a href="#how-to-add-handwriting"
              >Guide to add your own Handwriting</a
            >
          </p>
        </div>
        <div>
          <h3>2. Where can I get more fonts?</h3>
          <p>
            You can use fonts from
            <a
              href="https://www.quantumenterprises.co.uk/handwriting-fonts/fontvault.htm"
              >https://www.quantumenterprises.co.uk/handwriting-fonts/fontvault.htm</a
            >
          </p>
        </div>
        <div>
          <h3>3. There are gaps between letters in custom fonts</h3>
          <p>
            This is a known issue that we haven't figured out the solution for.
            As a temporary workaround, there is letter spacing and word spacing
            option to adjust the gap.
          </p>
        </div>
      </section>
    </main>
    <footer style="padding: 40px 0px 10px 0px;">
      Thank you for using Text to Handwriting! If you have any
      questions/suggestions/feedback, you can drop me a message on
      <a href="https://twitter.com/saurabhcodes">Twitter @saurabhcodes</a>
      <br /><br />Do star the
      <a href="https://github.com/saurabhdaware/text-to-handwriting"
        >Text-to-Handwriting GitHub Repository</a
      >
      and If you're using it for writing assignments, make sure you use it at
      your own risk and If it fails and your teacher catch this tool, ask them
      to star my GitHub as well :D <br />
      <br />byeeee! <br /><br />
      ~ Saurabh (<a href="https://saurabhdaware.in">https://saurabhdaware.in</a
      >)
    </footer>

    <!-- Fixed Elements -->
    <section class="draw-container popup-container">
      <button class="close-button">&times;</button>
      <div class="display-flex responsive-flex">
        <canvas
          id="diagram-canvas"
          style="background-color: #fff;"
          height="300px"
          width="600px"
        ></canvas>
        <div class="flex-1 buttons-container padding-around">
          <button
            id="add-to-paper-button"
            style="margin-top: 5px; margin-bottom: 5px;"
          >
            Add to Paper
          </button>
          <button
            id="draw-download-button"
            style="margin-top: 5px; margin-bottom: 5px;"
          >
            Download Image
          </button>
          <br /><br />
          <input
            type="file"
            id="image-to-add-in-canvas"
            accept="image/x-png,image/jpeg"
            hidden="hidden"
          />
          <br /><br /><button id="add-new-image-button">Add bg image</button>
          <br /><br />
          <button
            id="clear-draw-canvas"
            class="blue-button"
            style="background-color: #f30; color: #fff;"
          >
            Clear Canvas
          </button>
        </div>
      </div>
    </section>
    <!-- GitHub Corner logo -->
    <a
      tabindex="0"
      href="https://github.com/saurabhdaware/text-to-handwriting"
      rel="noopener noreferrer"
      target="_blank"
      class="github-corner"
      aria-label="View source on GitHub"
    >
      <svg
        width="80"
        height="80"
        viewBox="0 0 250 250"
        style="
          fill: #151513;
          color: #fff;
          position: absolute;
          top: 0;
          border: 0;
          right: 0;
        "
        aria-hidden="true"
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style="transform-origin: 130px 106px;"
          class="octo-arm"
        ></path>
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
          class="octo-body"
        ></path>
      </svg>
    </a>

    <script
      src="./js/vendors/html2canvas.min.js"
      crossorigin="anonymous"
    ></script>
    <script type="module" src="js/app.mjs"></script>
    <script defer src="https://unpkg.com/jspdf@^1/dist/jspdf.min.js"></script>
    <script>
      function toggleTheme(toggleButton) {
        if (document.body.classList.contains('dark')) {
          document.body.classList.add('fade-in-light');
          document.body.classList.remove('dark');
          document.body.classList.remove('fade-in-dark');
          window.localStorage.setItem('prefers-theme', 'light');
          if (toggleButton) {
            toggleButton.setAttribute('aria-pressed', false);
            toggleButton.setAttribute('aria-label', 'Activate Dark Mode');
          }
        } else {
          document.body.classList.add('fade-in-dark');
          document.body.classList.add('dark');
          document.body.classList.remove('fade-in-light');
          window.localStorage.setItem('prefers-theme', 'dark');
          if (toggleButton) {
            toggleButton.setAttribute('aria-pressed', true);
            toggleButton.setAttribute('aria-label', 'Activate Light Mode');
          }
        }
      }

      const localPreference = window.localStorage.getItem('prefers-theme');
      if (localPreference) {
        if (localPreference === 'light') document.body.classList.remove('dark');
        else document.body.classList.add('dark');
      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
      }
    </script>
  </body>
</html>
